<script setup lang="ts">
import { NButton, NImage } from 'naive-ui'
import { computed, ref, watch } from 'vue'
import { useBasicLayout } from '@/hooks/useBasicLayout'
import { localGet, mlog, url2base64 } from '@/api'
import { homeStore } from '@/store'
const props = defineProps<{ chat: Chat.Chat }>()
const { isMobile } = useBasicLayout()
const st = ref({ isLoadImg: false, uri_base64: '' })
const chat = computed(() => props.chat)

const load = async () => {
  mlog('load', chat.value.myid, chat.value.opt?.imageUrl)
  if (chat.value.model != 'dall-e-3' || !chat.value.myid || !chat.value.opt?.imageUrl) {
    st.value.isLoadImg = true
    return
  }
  const key = `dall:${chat.value.myid}`
  try {
    if (chat.value.opt?.imageUrl) {
      // await loadImg(chat.value.opt?.imageUrl);
      let base64 = await localGet(key)
      if (!base64) {
        const ubase64 = await url2base64(`https://wsrv.nl/?url=${encodeURIComponent(chat.value.opt?.imageUrl)}`, key)
        base64 = ubase64.base64
        mlog('图片已保存>>', ubase64.key)
      }
      st.value.uri_base64 = base64
    }
  }
  catch (error) {
    mlog('图片保存失败', error)
  }

  st.value.isLoadImg = true
}

watch(() => homeStore.myData.act, (n) => {
  const actData: any = homeStore.myData.actData

  if (n == 'dallReload' && actData.myid == chat.value.myid) { //
    mlog('dallReload', actData.myid, chat.value.opt?.imageUrl)
    st.value.isLoadImg = false
    load()
    // if( !actData.noShow ) ms.success('图片刷新成功！');
  }
})

load()
</script>

<template>
  <div>
    <div v-if="st.isLoadImg">
      <NImage v-if="chat.opt?.imageUrl" :src="st.uri_base64 ? st.uri_base64 : chat.opt.imageUrl" class=" rounded-sm " :class="[isMobile ? '' : '!max-w-[500px]']" />
    </div>
    <div v-else-if="chat.opt?.imageUrl" class="w-[200px] h-[150px] flex flex-col justify-center items-center">
      <div class="p-4">
        {{ $t('mjchat.loading') }}
      </div>
      <NButton type="primary">
        <a :href="chat.opt?.imageUrl" target="_blank">{{ $t('mjchat.openurl') }}</a>
      </NButton>
    </div>
  </div>
</template>
